<template>
	<view>
		<pageheader :setting="settingdata"></pageheader>
		<view class="app_welcome">
			<text class="app_halo">输入验证码</text>
			<text class="app_content">短信验证码已发至 {{phone}}</text>
		</view>
		<view class="phonecontent">
			<u-input v-model="codes" placeholder="请输入验证码" maxlength="6" type="number" :border="false"
				class="phone_puts" />
			<u-toast ref="uToast"></u-toast>
			<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange">
			</u-verification-code>
			<view class="obtain" v-bind:class="{ time: wait_timer > 0 }" @click="getMobileCode()">
				{{ getMobileCodeText() }}
			</view>
		</view>
		<view class="app_door">
			<u-button shape="circle" type="success" :custom-style="wechatStyle" :hair-line="false" @click="login"
				v-if="type==1">完成
			</u-button>
			<u-button shape="circle" type="success" :custom-style="wechatStyle" :hair-line="false" @click="changePhone"
				v-if="type==2">确认修改
			</u-button>
			<view class="phone_login">没收到验证码？倒计时结束后可重新获取</view>
			<view class="app_reading">
				登录即表示您已阅读并同意 <text @click="readingo(1)">《用户协议》</text>和<text @click="readingo(2)">《隐私协议》</text>
			</view>
		</view>
	</view>
</template>

<script>
	var _this;
	export default {
		data() {
			return {
				settingdata: {
					name: ' ',
					bgColor: '#fff',
					titleColor: '#000000',
					showNav: true,
					showTypes: 0,
					position: "verify"
				},
				wechatStyle: {
					width: '590rpx',
					color: '#fff',
					background: '#38be8c'
				},
				verify: '',
				tips: '',
				seconds: 60,
				phone: '',
				codes: '',
				wait_timer: false,

				type: "", //1登录 2验证 判断是登录的验证码还是更换手机的验证码
			}
		},
		onLoad(options) {
			console.log(options)
			this.phone = options.phone
			this.type = options.type
			_this = this
			_this.getMobileCode()
		},
		onShow() {},
		methods: {
			toback: function() {
				uni.navigateBack({
					delta: 1
				})
			},
			toyanzheng: function() {
				// uni.navigateTo({
				//   url: "/home/login/verify"
				// })
			},
			codeChange(text) {
				_this.tips = text;
			},
			// 验证码
			getMobileCode: function() {
				_this.$api.get("send_code", {
					mobile: this.phone
				}).then(data => {
					if (this.wait_timer > 0) {
						return false;
					}
					this.wait_timer = 59;
					var that = this;
					var timer_interval = setInterval(function() {
						if (that.wait_timer > 0) {
							that.wait_timer--;
						} else {
							clearInterval(timer_interval);
						}
					}, 1000);
				});
			},
			getMobileCodeText: function() {
				if (this.wait_timer > 0) {
					return this.wait_timer + 's后获取';
				}

				if (this.wait_timer === 0) {
					return '重新获取';
				}

				if (this.wait_timer === false) {
					return '获取验证码';
				}
			},
			// 登录
			login() {
				if (!this.codes) {
					uni.showToast({
						title: '验证码不能为空',
						duration: 2000,
						icon: 'none'
					});
					return false;
				}
				let params = {
					mobile: this.phone,
					sign: 'mobile_oauth_login',
					code: this.codes
				};
				_this.$api.post("mobilelogin", params).then(data => {
					uni.setStorageSync('token', data.token);
					uni.setStorageSync("client_uid", data.client_uid)
					uni.redirectTo({
						url: "/pages/index/index"
					})
					uni.showToast({
						icon: 'success',
						title: '登录成功',
						duration: 2000
					});
				});
			},

			// 更改手机号
			changePhone() {
				if (!this.codes) {
					uni.showToast({
						title: '验证码不能为空',
						duration: 2000,
						icon: 'none'
					});
					return false;
				}
				_this.$api.post("savemobile", {
					mobile: this.phone,
					code: this.codes
				}).then(data => {
					console.log(data)
					uni.showToast({
						title: '修改成功',
						icon: 'success',
						duration: 2000,
						success: function() {
							setTimeout(function() {
								wx.navigateBack({
									delta: 2
								})
							}, 1000);
						}
					})
				});
			},
			
			readingo(e) {
				console.log(e) 
				if (e == 1) {
					uni.navigateTo({
						url: "/home/login/reading?name=用户协议&type=1"
					})
				} else if (e == 2) {
					uni.navigateTo({
						url: "/home/login/reading?name=隐私协议&type=2"
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.app_welcome {
		margin-top: 214rpx;
		padding: 0 64rpx;
		display: flex;
		flex-direction: column;

		.app_halo {
			font-size: 50rpx;
			color: #333333;
			font-weight: bold;
		}

		.app_content {
			font-size: 24rpx;
			color: #666666;
			margin-top: 20rpx;
		}
	}

	.phonecontent {
		margin: 120rpx 64rpx 0 64rpx;
		padding: 20rpx 0;
		border-bottom: 2rpx solid #EEEEF1;
		display: flex;
		flex-direction: row;
		align-items: center;

		.phone_puts {
			flex: 1;
			font-size: 28rpx;
			color: #000;
			margin-right: 30rpx;
		}
	}

	.app_door {
		width: 100%;
		padding: 0 0 95rpx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 50rpx;

		.phone_login {
			margin-top: 30rpx;
			font-size: 24rpx;
			color: #666666;
		}

		.app_reading {
			margin-top: 188rpx;
			font-size: 24rpx;
			color: #d5d5d5;
			position: absolute;
			bottom: 95rpx;

			text {
				color: rgb(56, 190, 140);
			}
		}
	}

	.obtain {
		font-family: SourceHanSansCN-Regular;
		font-weight: normal;
		font-stretch: normal;
		letter-spacing: 0px;
		font-size: 26rpx;
		color: #000000;
	}
</style>
